<link rel="stylesheet" href="/assets/home/css/confirm.css" />
<!-- 下拉框 -->
<link rel="stylesheet" href="/assets/home/plugin/mui/mui.picker.css" />
<link rel="stylesheet" href="/assets/home/plugin/mui/mui.poppicker.css" />
<!-- 请求 -->
<script src="/assets/home/plugin/axios/axios.min.js"></script>
<script src="/assets/home/plugin/axios/request.js"></script>
<script src="/assets/home/plugin/mui/mui.picker.js"></script>
<script src="/assets/home/plugin/mui/mui.poppicker.js"></script>

<form method="post" style="padding-top: 0">
    <div class="course">
        <div class="left">
            <div class="thumb">
                <img src="{$info.thumbs_text}" alt="">
            </div>
        </div>
        <div class="right">
            <div class="name">{$info.title}</div>
            <div class="teacher">授课老师：{$info.teacher.name ? $info.teacher.name : '暂无授课老师'}</div>
            <div class="type">课程分类：{$info.category.name ? $info.category.name : '未知分类'}</div>
        </div>
    </div>

    <div class="coupon-info">
        <div class="text">
            优惠券：
        </div>
        <a href="#">
            <div class="coupon">
                暂无优惠券 <span>></span>
            </div>
            <!-- 隐藏域 -->
            <input type="hidden" name="coupon">
        </a>
    </div>

    <div class="price-info">
        <div class="text">
            课程价格：
        </div>
        <div class="price">
            ￥{$info.price}
        </div>
    </div>

    <div class="pay-info">
        <div class="text">
            支付方式：
        </div>
        <div class="pay" id="pay"> 余额支付</div>
        <input type="hidden" name="pay" value="money">
    </div>

    <div class="footer">
        <div class="total">
            总价：<span id="total">￥{$info.price}</span>
        </div>
        <button class="btn">提交</button>
    </div>
</form>

<script>

    $("#pay").click(function () {
        // 设置弹出框
        // 创建弹出框对象
        var picker = new mui.PopPicker();
        // 设置数据源
        picker.setData([
            { value: 'money', text: '余额支付' },
            { value: 'zfb', text: '支付宝' },
            { value: 'wx', text: '微信支付' }
        ]);
        // 显示弹出框
        picker.show(function (item) { // 选择完毕回调函数
            $("#pay").html(item[0].text); // 显示选择的支付方式
            $("input[name=pay]").val(item[0].value) //隐藏域赋值
        })
    })

    // 优惠券
    let coupon = []
    try {
        // 获取优惠券列表
        coupon = `{$couponlist}`
        // 转换为json数组
        coupon = JSON.parse(coupon) ? JSON.parse(coupon) : []
    } catch (err) { }

    // 点击优惠券弹出框
    $(".coupon").click(function () {
        // 判断是否有优惠券
        if (coupon.length <= 0) {
            $(".coupon").html('暂无优惠券');
            return false;
        }

        var picker = new mui.PopPicker();

        // 设置数据源（优惠券列表）
        let data = [];

        coupon.forEach((item) => {
            data.push({
                value: `${item.id}`,
                text: `[优惠活动: ${item.coupon.title}] ￥ ${item.coupon.rate * 100} 折`,
                rate: item.coupon.rate
            })
        })

        picker.setData(data);
        picker.show(function (item) {
            $(".coupon").html(item[0].text);
            $("input[name=coupon]").val(item[0].value)

            // 计算优惠之后的价格
            // 折扣率
            let rate = item[0].rate;
            rate = parseFloat(rate)

            // 课程价格
            let price = `{$info.price}`;
            price = parseFloat(price)

            // 计算优惠之后的价格
            let total = (rate * price).toString()
            let key = total.indexOf('.')
            total = "￥" + total.substring(0, key + 3)
            $("#total").html(total)
        })
    })
</script>